<template>
  <div class="app-container common-card-wrapper">
    <el-page-header
      content="用户详情"
      style="margin-bottom: 10px"
      @back="back"
    />
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span>用户基础信息</span>
        <!-- <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="tocaiwu()"
        >直推邀请记录</el-button
        >
        <el-button
          style="float: right; padding: 3px 10px"
          type="text"
          @click="tocaiwu1()"
        >订单记录</el-button
        > -->
      </div>
      <div>
        <p class="p_div">
          <span class="wd200">用户账号：</span>
          <span>{{ info.mobile }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">用户昵称：</span>
          <span>{{ info.nick }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">邀请人账号：</span>
          <span>{{ info.parentMobile }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">用户状态：</span>
          <span>{{ ['有效用户','无效用户'][info.delFlag] }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">团队等级：</span>
          <span>{{ ['无','VIP','MIP','AIP'][info.level] }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">节点等级：</span>
          <span>{{ ['无','普通节点','超级节点','股东节点'][info.nodeLevel] }}</span>
        </p>
      </div>
    </el-card>
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>权限</span>
      </div>
      <div>
        <p class="p_div">
          <span class="wd200">是否允许提币：</span>
          <el-radio-group v-model="info.isOutCoin" @change="invitorChange">
            <el-radio-button :label="0">开启</el-radio-button>
            <el-radio-button :label="1">关闭</el-radio-button>
          </el-radio-group>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">是否允许转账：</span>
          <el-radio-group v-model="info.isTransfer" @change="transChange">
            <el-radio-button :label="0">开启</el-radio-button>
            <el-radio-button :label="1">关闭</el-radio-button>
          </el-radio-group>
        </p>
      </div>
    </el-card> -->
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>超环网络生态模型</span>
      </div>
      <div>
        <p class="p_div">
          <span class="wd200">入环位置：</span>
          <span>{{ info.ringPosition }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">可用余额：</span>
          <span>{{ info.bokBalance }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">质押数量：</span>
          <span>{{ info.pledgeFund }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">剩余天数：</span>
          <span>{{ info.remainingPledgeDay }}</span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">选择天数：</span>
          <span>{{ info.pledgeDay }}</span>
        </p>
      </div>
    </el-card> -->
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>资产</span>
      </div>
      <div>
        <p class="p_div">
          <span class="wd200">交易账户：</span>
          <span style="display: inline-block">
            <p style="margin-bottom: 8px">
              <span style="margin-right: 10px">USDT:</span>
              <span
                style="margin-right: 5px"
              >可用: {{ info.usdtAvailable }}</span
              >
              <span style="margin-right: 5px">冻结: {{ info.usdtFreeze }}</span>
            </p>
            <p style="margin-bottom: 8px">
              <span style="margin-right: 18px">BOK:</span>
              <span
                style="margin-right: 5px"
              >可用: {{ info.bokAvailable }}</span
              >
              <span style="margin-right: 5px">冻结: {{ info.bokFreeze }}</span>
            </p>
          </span>
        </p>
        <el-divider />
        <p class="p_div">
          <span class="wd200">节点账户：</span>
          <span style="display: inline-block">
            <p>
              <span style="margin-right: 18px">BOK:</span>
              <span
                style="margin-right: 5px"
              >可用: {{ info.bokNodeAvailable }}</span
              >
            </p>
          </span>
        </p>
      </div>
    </el-card> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>机器人信息</span>
      </div>
      <el-table :data="list" stripe>
        <el-table-column label="机器人开通时间" prop="createAt" width="100" />
        <el-table-column label="仓位 U" prop="position" width="100" />
        <el-table-column
          align="center"
          label="有效期"
          prop="endAt"
        />
        <el-table-column
          label="初始余额"
          prop="initAmount"
          width="100"
        />
        <el-table-column
          label="累计收益"
          prop="grandTotal"
          width="100"
        />

        <el-table-column label="年收益率" prop="annualIncome" />
        <el-table-column label="已运行时间" prop="running" />
        <el-table-column label="状态" prop="state" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 0" style="text-align: center">运行中</div>
            <div v-if="scope.row.type == 1" style="text-align: center">已停止</div>
            <div v-if="scope.row.type == 2" style="text-align: center">已过期</div>
          </template>
        </el-table-column>
        <el-table-column
          label="API名称"
          prop="remarks"
        />
      <!-- <el-table-column label="可用余额" prop="usableFund"></el-table-column>
      <el-table-column label="用户状态" prop="transferFreezeFlag">
        <template slot-scope="scope">
          <div
            style="text-align: center"
            v-if="scope.row.transferFreezeFlag == 0"
          >
            正常
          </div>
          <div
            style="text-align: center"
            v-if="scope.row.transferFreezeFlag == 1"
          >
            冻结
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <span
            class="btn"
            v-if="scope.row.transferFreezeFlag == 1"
            @click="open2(scope.row)"
            >解冻</span
          >
          <span
            class="btn"
            v-if="scope.row.transferFreezeFlag == 0"
            @click="open(scope.row)"
            >冻结</span
          >
          <span
            class="btn"
            v-if="!scope.row.parentNick"
            @click="openDialog(scope.row)"
            >邀请人</span
          >
          <span class="btn" @click="toUserDetail(scope.row)">查看详情</span>
        </template>
      </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="params.page"
          background
          :page-size="params.size"
          layout="prev, pager, next"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!--    表单渲染-->
    <!-- <el-drawer
      :visible.sync="drawer"
      :before-close="crudcancelCU"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="1050px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>邀请记录</span>
        <span class="el-icon-close" @click="drawer = false" />
      </div>
      <div class="drawer-content">
        <el-scrollbar :native="false" :noresize="false" class="dark fix">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              label="直推人"
              name="first"
            >
              <child4
                :user-id="userId"
                :address="address"
              /></el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </el-drawer> -->
    <!--    表单渲染-->
    <!-- <el-drawer
      :visible.sync="drawer1"
      :before-close="crudcancelCU1"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="1050px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>订单记录</span>
        <span class="el-icon-close" @click="drawer1 = false" />
      </div>
      <div class="drawer-content">
        <el-scrollbar :native="false" :noresize="false" class="dark fix">
          <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane
              label="投入订单"
              name="first"
            ><child3
              :user-id="userId"
            /></el-tab-pane>
            <el-tab-pane
              label="已完成订单"
              name="second"
            ><child2
              :user-id="userId"
            /></el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </el-drawer> -->
  </div>
</template>

<script>
import { getByUseridInfo, invitor, getUsers } from '../../api/customer'
import pagination from '@crud/Pagination'
import addressrecord from './addressrecord/index'
import accountAsset from './accountasset/index'
import accountFiat from './accountfiat/index'
import accountract from './accountract/index'
import inviteList from './inviteList/index'
// const Base64 = require("js-base64").Base64;

export default {
  name: 'CustomerDetail',

  components: {
    pagination,
    child1: addressrecord,
    child2: accountAsset,
    child3: accountFiat,
    child4: accountract,
    child9: inviteList
  },
  data() {
    return {
      info: {},
      visible: false,
      visible1: false,
      visible2: false,
      drawer: false,
      drawer1: false,
      userId: this.$route.query.userId ? this.$route.query.userId : null,
      address: null,
      activeName: 'first',
      activeName1: 'first',
      params: {
        page: 1,
        id: this.$route.query.userId,
        size: 10
      },
      pageTotal: 0
    }
  },
  computed: {
    query() {
      return this.$route.query
    }
  },
  mounted() {
    // this.getInfo()
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.params.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    getList() {
      getUsers(this.params).then((res) => {
        this.info = res.data
        const _list = res.data.robotPage.records
        _list.forEach((el) => {
          el.createAt = this.$moment(el.createAt).format('YYYY-MM-DD HH:mm:ss')
          el.endAt = this.$moment(el.endAt).format('YYYY-MM-DD HH:mm:ss')
        })
        this.list = _list
        this.pageTotal = +res.data.robotPage.total
      })
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },
    tocaiwu() {
      this.drawer = true
    },
    tocaiwu1() {
      this.drawer1 = true
    },
    crudcancelCU() {
      this.drawer = false
    },
    crudcancelCU1() {
      this.drawer1 = false
    },
    transChange(val) {
      invitor({
        state: val,
        type: 2,
        userId: this.$route.query.userId
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getInfo()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    invitorChange(val) {
      invitor({
        state: val,
        type: 1,
        userId: this.$route.query.userId
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getInfo()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    getInfo() {
      const { userId } = this.query
      getByUseridInfo({ id: userId }).then((res) => {
        if (res.code == 0) {
          this.info = res.data
          this.address = res.data.bokUrl
        }
      })
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.p_div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.p_div2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.wd200 {
  width: 200px;
}
</style>
